import Head from 'next/head';
import Example from '../../../examples/virtualized';

<Head>
  <title>Virtualized Example - Mantine React Table Docs</title>
  <meta
    name="description"
    content="An example of a Mantine React Table with virtualization enabled to achieve higher performance when rendering large data sets"
  />
  <meta
    property="og:title"
    content="Virtualization in Mantine React Table Example"
  />
  <meta
    property="og:description"
    content="Learn how to enable virtualization features in Mantine React Table"
  />
</Head>

## Virtualized Example

Mantine React Table has a built-in row virtualization feature (via [`@tanstack/react-virual`](https://tanstack.com/virtual/v3)) that lets you to render a large number of rows without major performance issues.

Try out the performance of the table below with **10,000 rows** and over a dozen columns! Filtering, Search, and Sorting also maintain usable performance.

Be sure to also check out the full [virtualization feature guide docs](/docs/guides/virtualization) to learn about both Row and Column Virtualization.

> NOTE: You should only enable row virtualization if you have a large number of rows or columns. Depending on the size of the table, if you are rendering fewer than a couple dozen rows at a time, you will actually just be adding extra overhead to the table renders. Virtualization only becomes necessary when you have over 50 rows or so at the same time with no pagination or dozens of columns.

<Example />

View Extra Storybook **[Examples](https://www.mantine-react-table.dev/?path=/story/features-virtualization--enable-row-virtualization)**
